<template>
	<view class="liveModule">
		<view class="liveTopbar">
			<input type="text" value="" placeholder="输入关键字查询" />
			<image src="../lb/搜索.png" mode=""></image>
		</view>
		<view class="liveCont">
			<view class="nav">
						<view class="flex_between">
							<view class="nav_title">
								<view :class="{'active':isActive==1}" @click="chenked(1)">
									官方直播
								</view>
							</view>
							<view class="nav_title">
								<view :class="{'active':isActive==2}" @click="chenked(2)">
									展商直播
								</view>
							</view>
						</view>
					</view>
					<view class="navDate">		
						<view class="ndItem" v-for="(item,index) in arr1" :key="index">
							<view :class="Active==index?'active':''" @click="btn(index)">
								<text class="itemDate">{{item.top}}</text>
								<text class="itemWeekday">{{item.bottom}}</text>
							</view>
						</view>
					</view>
					<!-- nav-item -->
					<view class="nav_item" v-if="isActive==1">
						<view class="zbList">
							<view class="zbItem" v-for="(item,index) in list" :key="index">
								<text class="zbLogo" :style="{'background':' #'+item.bg}">{{item.logo}}</text>
								<image :src="item.url" mode=""></image>
								<view class="zbText">
									<text class="zbTit">{{item.tit}}</text>
									<text class="zbTime">{{item.time}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="nav_item" v-if="isActive==2">
						<view class="zbList">
							<view class="zbItem" v-for="(item,index) in list1" :key="index">
								<text class="zbLogo" :style="{'background':' #'+item.bg}">{{item.logo}}</text>
								<image :src="item.url" mode=""></image>
								<view class="zbText">
									<text class="zbTit">{{item.tit}}</text>
									<text class="zbTime">{{item.time}}</text>
								</view>
							</view>
						</view>
					</view>
		
		</view>
	</view>
</template>
<script>
	let arr =[];
		for (var i = 0; i < 6; i++) {
		  arr.push(getDay(i))
		}
		
		console.log(arr)
		
		function getDay(day) {
		  //Date()返回当日的日期和时间。
		  var days = new Date();
		  //getTime()返回 1970 年 1 月 1 日至今的毫秒数。
		  var gettimes = days.getTime() + 1000 * 60 * 60 * 24 * day;
		  //setTime()以毫秒设置 Date 对象。
		  days.setTime(gettimes);
		  var year = days.getFullYear();
		  var month = days.getMonth() + 1;
		  if (month < 10) {
		    month = '0' + month;
		  }
		  var today = days.getDate();
		  if (today < 10) {
		    today = '0' + today;
		  }
		
		  var week = days.getDay();
		  var weekArray = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
		  // return month + '.' + today + '-' + '-' +  weekArray[week];
		  return { top: month + '.' + today, bottom: weekArray[week] }
		}
	export default {
			data() {
				return {
					isActive:1,
					Active:0,
					list:[
						{
							logo:'预告',
							bg:'4585ed',
							url:require("./img/n1.jpg"),
							tit:'横向宣传推介 跨域交流协作推介会',
							time:'10:00-12:00'
						},
						{
							logo:'直播中',
							bg:'fa5c52',
							url:require("./img/n1.jpg"),
							tit:'横向宣传推介 跨域交流协作推介会',
							time:'10:00-12:00'
						},
						{
							logo:'直播中',
							bg:'fa5c52',
							url:require("./img/n1.jpg"),
							tit:'横向宣传推介 跨域交流协作推介会',
							time:'10:00-12:00'
						},
						{
							logo:'直播中',
							bg:'fa5c52',
							url:require("./img/n1.jpg"),
							tit:'横向宣传推介 跨域交流协作推介会',
							time:'10:00-12:00'
						},
						{
							logo:'直播中',
							bg:'fa5c52',
							url:require("./img/n1.jpg"),
							tit:'横向宣传推介 跨域交流协作推介会',
							time:'10:00-12:00'
						},
						{
							logo:'直播中',
							bg:'fa5c52',
							url:require("./img/n1.jpg"),
							tit:'横向宣传推介 跨域交流协作推介会',
							time:'10:00-12:00'
						},
						
					],	
					list1:[
										{
											logo:'预告',
											bg:'4585ed',
											url:require("./img/n1.jpg"),
											tit:'横向宣传推介 跨域交流协作推介会',
											time:'10:00-12:00'
										},
										{
											logo:'直播中',
											bg:'fa5c52',
											url:require("./img/n1.jpg"),
											tit:'横向宣传推介 跨域交流协作推介会',
											time:'10:00-12:00'
										},
										{
											logo:'直播中',
											bg:'fa5c52',
											url:require("./img/n1.jpg"),
											tit:'横向宣传推介 跨域交流协作推介会',
											time:'10:00-12:00'
										},
										{
											logo:'直播中',
											bg:'fa5c52',
											url:require("./img/n1.jpg"),
											tit:'横向宣传推介 跨域交流协作推介会',
											time:'10:00-12:00'
										},
										{
											logo:'直播中',
											bg:'fa5c52',
											url:require("./img/n1.jpg"),
											tit:'横向宣传推介 跨域交流协作推介会',
											time:'10:00-12:00'
										},
										{
											logo:'直播中',
											bg:'fa5c52',
											url:require("./img/n1.jpg"),
											tit:'横向宣传推介 跨域交流协作推介会',
											time:'10:00-12:00'
										},
										
									],
									arr1:arr	
								}
							},
							methods: {
								chenked(type) {
									this.isActive = type
								},
								btn(index){
									this.Active = index
								}
							},
							mounted(){
								console.log(this.arr1)
							}
						}
</script>
<style scoped>
	.liveModule{
		position: relative;
	}
.liveTopbar{
	height: 100px;
	background-color: #1461f9;
	padding: 0 30rpx;
margin: 0 auto;
}
.liveTopbar input{
	width: 660rpx;
	height: 60rpx;
	background: #fff;
	padding-left: 24rpx;
	border-radius: 50rpx;
	transform: translateY(30rpx);
}
.liveTopbar image{
	position: absolute;
    width: 50rpx;
	height: 50rpx;
	right: 60rpx;
	top: 35rpx;
}
.liveCont{
	border-top-left-radius: 50rpx;
	border-top-right-radius: 50rpx;
	padding-bottom: 100rpx;
	position: absolute;
	width: 100% !important;
	top: 70%;
}
.zbList{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.zbItem{
	width: 355rpx;
	height: 440rpx;
	border-radius: 25rpx;
	position: relative;
margin-bottom: 30rpx;	
}
.zbItem image{
	width: 100%;
	height: 100%;
	border-radius: 25rpx;
}
.zbItem .zbLogo{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	color: #fff;
	z-index: 99;
	width: 90rpx;
	height: 38rpx;
	text-align: center;
	line-height: 38rpx;
	font-size: 16rpx;
	border-top-left-radius: 25rpx;
	border-bottom-right-radius: 25rpx;
}
.zbItem .zbText{
	position: absolute;
	left: 0;
	bottom: 0;
	color: #fff;
	padding: 0 31rpx 0 22rpx;
	display: flex;
	flex-wrap: wrap;
}
.zbText .zbTit{
	font-size: 28rpx;
}
.zbText .zbTime{
	width: 100%;
	font-size: 24rpx;
	padding: 20rpx 0;
}

.navDate{
  padding: 0 30rpx 30rpx 30rpx;
  display: flex;
  justify-content: space-around;
}
.ndItem{
	width: 92rpx;
	height: 92rpx;
	border-radius: 15rpx;
	
}
.ndItem>view{
	background: #f6f6f6;
	color: #7e7e7e;
	border-radius: 15rpx;
	width: 92rpx;
	height: 100rpx;
	padding: 15rpx 0 10rpx 0;
	display: flex;
	flex-wrap: wrap;
}
.ndItem text{
	display: block;
	width: 100%;
	text-align: center;
}
.ndItem .active{
	color: #fff;
	background: #0956F0;
}
.itemDate{
	font-size: 16rpx;
}
.itemWeekday{
	font-size: 24rpx;
}
</style>
<style lang="scss" scoped>
	.liveCont {
		width: 690rpx;
		background-color: #fff;

		.nav {

			.flex_between {
				display: flex;

				.nav_title {
					height: 88rpx;
					line-height: 88rpx;
					width: 100%;
					text-align: center;
					font-size: 28rpx;
					color: #333;
					font-weight: 600;
				}
			}
		}
	}

	.active {
		position: relative;
		color: #0956F0;
	}
</style>